<template>
	<view class="tpl-cart-order-wrap">
		<view class="tpf-cart-seller flex flex-align-center">
			<tpl-check :checked="shopChecked" @checkTap="shopCheckedChange($event)" class="tpf-cart-select-ico"></tpl-check>
			<view class="seller-name">{{shop.name}}</view>
		</view>
		<view class="tpf-cart-goods flex flex-align-center" v-for="(cart,cartIndex) of productList" :key="cartIndex">
			<tpl-check :checked="cart.checked" @checkTap="productCheckedChange(cartIndex, $event)" class="tpf-cart-select-ico"></tpl-check>
			<view class="tpf-cart-goods-thumb"><img class="tpf-cart-goods-thumb-img" :src="cart.goods_thumb" alt=""></view>
			<view class="tpf-cart-goods-info flex-1">
				<view class="tpf-cart-goods-name">{{cart.goods_name}}</view>
				<view class="tpf-cart-goods-sprc">{{cart.spec_key_name}}</view>
				<view class="tpf-cart-goods-price-quantity flex flex-align-center flex-pack-justify">
					<view class="tpf-goods-price">
						<tpl-price :price="cart.goods_price"></tpl-price>
					</view>
					<view class="tpf-goods-number">
						<uni-number-box :min="1" :max="cart.stock" :value="cart.number" @change="changerNumber" @blur="changerNumber" :originalData="{seller_id:shop.id,cart_id:cart.id}"></uni-number-box>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from './tpl-cart-order.js';
	
	export default {
		name: 'TplCartOrder',
		mixins: [config],
		props: {
			shop: {
				type: Object,
			},
			productList: {
				type: Array,
			}
		},
		computed: {
			shopChecked() {
				let shopChecked = true;
				this.productList.forEach(product => {
					if (!product.checked) {
						shopChecked = false;
					}
				});
				return shopChecked;
			}
		},
		methods: {
			shopCheckedChange(e) {
				this.$set(this.shop, 'checked', e);
				
				if (e) {
					this.productList.forEach((item, index) => {
						this.$set(this.productList[index], 'checked', true);
					})
				} else {
					this.productList.forEach((item, index) => {
						this.$set(this.productList[index], 'checked', false);
					})
				}
			},
			productCheckedChange(index, e) {
				this.$set(this.productList[index], 'checked', e);
				
				let isProductAllChecked = true;
				this.productList.forEach((item, index) => {
					if (!item.checked) {
						isProductAllChecked = false;
					}
				});
				if (isProductAllChecked) {
					this.$set(this.shop, 'checked', true);
				} else {
					this.$set(this.shop, 'checked', false);
				}
			},
			changerNumber(e){
				Number(e.number) && this.$emit("changerNumber",e);
			}
		},
	}
</script>

<style lang="scss" scoped>
.tpf-cart-select-ico{
	padding-right:18rpx;
}
.tpf-cart-goods{margin: 20rpx 0;}
.tpf-cart-goods-thumb{
	width: 200rpx;
	height: 200rpx;
	overflow: hidden;
}
.tpf-cart-goods-thumb-img{
	max-width: 100%;
}
.tpf-cart-goods-info{
	padding-left: 18rpx;
}
.tpf-cart-goods-name{
	font-size: $uni-font-size-sm;
	height: $uni-font-size-sm*2.5;
	overflow: hidden;
	word-break: break-all;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
}
.tpf-cart-goods-sprc{
	font-size: $uni-font-size-sm;
	color: #9e9e9e;
	padding: 18rpx 0;
}
.tpf-cart-goods-price-quantity .tpf-goods-price{
	color:$uni-text-color-red;
}
.tpf-cart-goods-price-quantity .money{
	font-size: $uni-font-size-sm*1.36;
}
.tpf-goods-number{
	transform: scale(0.8);
}
</style>